<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<body>
<h1 align="center">分页+模糊查询</h1>
<div style="margin: 0px auto; width: 290px; padding-bottom: 20px;">
    <input type="text" id="user_name" placeholder="请输入搜索关键字" size="30"> <input type="button" id="search" value="搜索">
</div>
<table id="tbTb" width="50%" align="center" border="1">
    <tr align="center">
        <th>编号</th>
        <th>姓名</th>
        <th>学科</th>
    </tr>
    <tbody id="test" align="center">

    </tbody>
</table>
<div style="margin: 0px auto;padding-top: 50px; width: 220px">
    <!--<a href="javascript:void(0)" id="first" class="pages">首页</a>
    <a href="javascript:void(0)" id="prev" class="pages">上一页</a>
    <a href="javascript:void(0)" id="next" class="pages">下一页</a>
    <a href="javascript:void(0)" id="last" class="pages">最后一页</a>-->
    <input type="button" id="first" class="pages" value="首页">
    <input type="button" id="prev" class="pages" value="上一页">
    <input type="button" id="next" class="pages" value="下一页">
    <input type="button" id="last" class="pages" value="尾页">
</div>
<script>
    var currPage;//当前页
    var tPages;//总页数
    $(function (){
        var gettbList = function(curr){    //匿名函数 curr为当前页
            $.ajax({
                type:'POST',
                url:'/tbPage',
                dataType:'JSON',
                data:{
                    pageSize:5,
                    pageNum:curr || 1,
                    user_name:$("#user_name").val()
                },
                success:function (result){
                    $("#test").find("tr").remove();
                    //console.log(result);
                    $.each(result.tbList,function (index,obj){
                        //console.log(obj.user_name);
                        var $newtr="<tr align='center'>"
                            +"<td>"+obj.id+"</td>"
                            +"<td>"+obj.user_name+"</td>"
                            +"<td>"+obj.course+"</td>"
                            +"</tr>";
                        //append 表示将节点追加在指定元素的末尾
                        $("#test").append($newtr);

                    });
                    currPage = result.pageNum;
                    tPages = result.totalPages;
                }
            });
        }

        $(".pages").click(function(){
            var flag = $(this).attr("id");
            if(flag == "first"){
                gettbList(1);
            }else if (flag == "prev"){
                currPage--;
                gettbList(currPage);
            }else if(flag == "next"){
                currPage++;
                gettbList(currPage);
            }else if (flag == "last"){
                gettbList(tPages);
            }
        });
        gettbList();

        //点击搜多的时候，调用查询
        $("#search").click(function () {
            gettbList();
        });
    })
</script>
</body>
</html>